<template>
  <div class="main bzbreport-list">
    <section>
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="130" :search="search"/>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column label="序号" align="center" type="index" width="80"></el-table-column>
        <el-table-column label="直播频道ID" prop="roundId" min-width="180" align="center"></el-table-column>
        <el-table-column label="直播名称" prop="roundName" min-width="180" align="center"></el-table-column>
        <el-table-column label="投诉类型" prop="reportType" min-width="180" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.reportType">{{reportTypeData[scope.row.reportType]}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdAt" min-width="180" align="center"></el-table-column>
        <el-table-column align="center" label="操作" width="160" v-if="rightsButtons['set'] || rightsButtons['operate']">
          <template slot-scope="scope">
            <template v-if="scope.row.status">
              <template v-if="rightsButtons['operate']&&scope.row.status===1">
                <el-button type="primary" size="mini" plain @click="handle(scope.row)">处理</el-button>
              </template>
              <template v-if="rightsButtons['operate']&&scope.row.status===2">
                <el-button type="primary" size="mini" plain @click="handleRevokeDetail(scope.row)">已撤销</el-button>
              </template>
              <template v-if="rightsButtons['set']&&scope.row.status===3">
                <el-button type="primary" size="mini" plain @click="handleCloseDetail(scope.row)">已关闭</el-button>
              </template>
            </template>
            <template v-else> - </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
    <el-dialog :title="titleText" :visible.sync="liveDetailDialog" width="40%">
      <div class="live-detail-content">
        <div class="live-item">
          <span>直播名称：</span>
          <span>{{formData.roundName}}</span>
        </div>
        <div class="live-item">
          <span>投诉类型：</span>
          <span>{{reportTypeData[formData.reportType]}}</span>
        </div>
        <div class="live-item">
          <span>投诉理由：</span>
          <span class="text">{{formData.reportReason}}</span>
        </div>
        <div class="live-item">
          <img class="live-img" :src="formData.reportImg" />
        </div>
        <div class="live-item" v-show="titleText">
          <el-input
            style="width: 50%"
            type="textarea"
            :rows="5"
            v-model="formData.feedbackReason">
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="liveDetailDialog=false" v-show="titleText">关闭</el-button>
        <el-button type="primary" @click="liveDetailDialog=false" v-show="!titleText">取消</el-button>
        <el-button type="primary" @click="handleRevoke(formData.id)" v-show="!titleText">撤销投诉</el-button>
        <el-button type="primary" @click="handleClose(formData.id)" v-show="!titleText">关闭直播间</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="liveTitleText" :visible.sync="dialogLive" width="30%" @close="handleDialogClose">
      <el-form :model="liveForm" :rules="liveRules" ref="liveForm" label-width="120px">
        <el-form-item :label="`${liveTitleText}原因`" prop="feedBackReason">
          <el-input
            type="textarea"
            :rows="2"
            :placeholder="`请描述${liveTitleText}理由`"
            v-model="liveForm.feedBackReason">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogLive = false">取 消</el-button>
        <el-button type="primary" @click="handleLive('liveForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import searchForm from '@/components/searchForm/index'
  export default {
    name: 'bzb-reportlist',
    components: {
      searchForm
    },
    data() {
      return {
        liveTitleText: '', // 撤销投诉/关闭理由弹框标题
        reportId: '', // 举报id
        dialogLive: false, // 撤销投诉/关闭理由弹框model
        liveForm: { // 撤销投诉/关闭理由
          feedBackReason: ''
        },
        liveRules: {
          feedBackReason: [
            { required: true, message: '原因不能为空', trigger: 'blur' }
          ],
        },
        formData: {}, // 撤销投诉/关闭理由详情数据
        liveDetailDialog: false, // 弹框model
        titleText: '', // 弹窗标题
        reportTypeData: ['', '违法违禁', '淫秽色情', '烟酒驾驶', '广告诈骗', '未成年人相关', '危险行为', '录屏、盗播', '侮辱谩骂', '其他'], // 举报类型转换
        listLoading: false,
        listQuery: {
          reportType: '', // 投诉类型
          roundId: '', // 直播id
          roundName: '', // 直播名称
          pageNo: 1,
          pageSize: 10,
        },
        queryConfig: [
          {
            prop: 'roundName',
            type: 'input',
            label: '直播名称/频道ID'
          },
          {
            prop: 'reportType',
            type: 'select',
            label: '投诉类型',
            data: [
              { label: '全部', value: '' },
              { label: '违法违禁', value: 1 },
              { label: '淫秽色情', value: 2 },
              { label: '烟酒驾驶', value: 3 },
              { label: '广告诈骗', value: 4 },
              { label: '未成年人相关', value: 5 },
              { label: '危险行为', value: 6 },
              { label: '录屏、盗播', value: 7 },
              { label: '侮辱谩骂', value: 8 },
              { label: '其他', value: 9 },
            ]
          }
        ],
        list: [], // 表格数据
        listTotal: 0 // 表格数据总条数
        }
    },
    created() {
      this.getList();
    },
    methods: {
      // 处理操作
      handle (row) {
        this.formData = Object.assign({}, row)
        this.titleText = ''
        this.liveDetailDialog = true
      },
      // 处理撤销详情
      handleRevokeDetail (row) {
        this.formData = Object.assign({}, row)
        this.titleText = '已撤销'
        this.liveDetailDialog = true
      },
      // 处理关闭详情
      handleCloseDetail (row) {
        this.formData = Object.assign({}, row)
        this.titleText = '已关闭';
        this.liveDetailDialog = true
      },
      // 处理撤销投诉
      handleDialogClose () {
        this.liveForm.feedBackReason = ''
        this.$refs['liveForm'].clearValidate()
      },
      // 处理撤销投诉
      handleRevoke (id) {
        this.reportId  = id
        this.liveDetailDialog = false
        this.liveTitleText = '撤销投诉'
        this.dialogLive = true
      },
      // 处理关闭直播间
      handleClose (id) {
        this.reportId  = id
        this.liveDetailDialog = false
        this.liveTitleText = '关闭直播间'
        this.dialogLive = true
      },
      // 撤销投诉/关闭直播间确定操作
      handleLive (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let path = (this.liveTitleText === '关闭直播间' ? `/live-bzb-manage/live/report/close/${this.reportId}` : `/live-bzb-manage/live/report/revoke/${this.reportId}`)
            this.request({
              url: path,
              method: 'post',
              data: {
                ...this.liveForm,
                reportId: this.reportId
              }
            }).then(() => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.dialogLive = false
              this.getList();
            }).catch(err => {
              console.log(err);
            })
          } else {
            this.dialogLive = true
            this.$message.error('原因必填')
          }
        })
      },
      // 获取列表
      getList () {
        this.listLoading = true;
        this.request({
          url: '/live-bzb-manage/live/report/query',
          method: 'get',
          params: { ...this.listQuery }
        }).then(({data}) => {
          this.list = data.records;
          this.listTotal = data.total;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      search () {
        this.listQuery.pageNo = 1;
        this.getList();
      },
      handleSizeChange (value) {
        this.listQuery.pageSize = value;
        this.getList()
      },
      handleCurrentChange(val){
        this.listQuery.pageNo = val;
        this.getList();
      },
      cancelPush(messageId){
        this.$confirm('此操作不可恢复, 是否继续取消发送操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request({
            url: `/mc-manage/messages/cancel/${messageId}?userId=${this.$store.getters.userId}`,
            method: 'put'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '取消成功!'
            });

            setTimeout(this.getList, 2100);
          }).catch(err => {
            console.log(err);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    }
  }
</script>

<style lang="scss">
  .live-detail-content {
    font-size: 16px;
    color: #333;
    max-height: 600px;
    overflow-y: auto;
    .live-img {
      max-width: 100%;
      height: 100px;
    }
    .live-item {
      display: flex;
      margin-bottom: 30px;
      .text {
        width: 86%;
      }
    }
  }
</style>
